<template>
  <div class="box">
    <div class="matter"></div>
    <div class="content">
      <div class="f1">
        <!-- 面包屑组件 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
          <span class="back" @click="goBack">返回上一页</span>
          <el-breadcrumb-item>
            <img src="@/assets/user/icon.png" alt="" />
            <span class="span">金融服务</span>
          </el-breadcrumb-item>

          <el-breadcrumb-item>
            <span class="span" style="color: #666">产品申请</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="f2">
        <div class="f2_list" v-if="ProductList">
          <div
            class="tag"
            :class="{
              sptx: ProductList.productSub.showtype == '进口企业',
              yptx: ProductList.productSub.showtype == '出口企业'
            }"
          >
            {{ ProductList.productSub.showtype }}
          </div>
          <div class="list_left">
            <img :src="ProductList.filepath" alt="" />
            <p>
              {{ ProductList.productSub.guarantee }}
            </p>
          </div>
          <div class="list_right">
            <div class="product-item-success">
              <ul>
                <li>
                  <h3 class="productName">
                    {{ ProductList.productSub.productname }}
                  </h3>
                </li>
                <li v-show="ProductList.productSub.amount">
                  <h4>{{ ProductList.productSub.amount }}<span> </span></h4>
                  <h5>{{ ProductList.productSub.showamount }}</h5>
                </li>
                <li v-show="ProductList.productSub.month">
                  <h4>{{ ProductList.productSub.month }}<span> </span></h4>
                  <!-- <h5>最高额度</h5> -->
                  <h5>{{ ProductList.productSub.showmonth }}</h5>
                </li>
                <li v-show="ProductList.productSub.radio">
                  <h4>{{ ProductList.productSub.radio }}<span> </span></h4>
                  <h5>{{ ProductList.productSub.showradio }}</h5>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="f3">
          <!-- 顶部标签 -->
          <div class="title">
            <h3 :class="{ active: row == 1 }" @click="apply">产品申请</h3>
            <h3 :class="{ active: row == 2 }" @click="row = 2">产品详情</h3>
          </div>
        </div>
        <!-- 申请流程 -->
        <div class="apply-flow" v-if="row == 1">
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </div>
        <!-- 产品详情页 -->
        <div class="details" v-else>
          <transition name="fade" mode="out-in">
            <div style="height: 4.4271rem">
              <div v-for="(item, index) in data" :key="index">
                <div class="titles">
                  <!-- <img src="@/assets/shangpiao/组41.png" alt="" /> -->
                  <h3>{{ item.module }}</h3>
                </div>
                <p v-html="item.content"></p>
              </div>
              <div class="title">
                <h3>客户端下载</h3>
                <p>
                  <img src="@/assets/shanglian/圆点小.svg" alt="" />
                  <a
                    href="http://operate.thunlink.cn/ThunRPA/贸采采客户端操作手册.pdf"
                    target="_blank"
                    >贸采采客户端操作手册</a
                  >
                </p>
                <p>
                  <img src="@/assets/shanglian/圆点小.svg" alt="" /><a
                    href="http://operate.thunlink.cn/ThunRPA/贸采采客户端.exe"
                    >贸采采客户端下载链接</a
                  >
                </p>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <el-dialog title="提示" :visible.sync="visible" width="32%">
      <!-- 内容区域 -->
      <div class="dialog-center">
        <p>为了保证体验更多的服务</p>
        <p>{{ title }}</p>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="visible = false">稍后</button>
        <button class="dialog-footer-bnt btn2" @click="updateCoopeorgInvoice()">立即前往</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getProductDetail, myPostFetch, loginStatus } from '@/utils'
export default {
  data() {
    return {
      visible: false,
      title: '',
      // 产品ID状态变量
      procedureId: '',
      productcode: null,
      ProductList: null,
      //产品数据
      row: 1,
      data: null //产品详情状态变量
    }
  },
  mounted() {
    document.documentElement.scrollTop = 0
    this.procedureId = localStorage.getItem('id')
    this.productcode = localStorage.getItem('productcode')

    // 判断路由地址中是否又row字段
    if (this.$route.query.row) {
      this.row = this.$route.query.row
    }
    this.getFindproduct()
    this.getProductDetail()
  },
  methods: {
    // 获取最上端产品列表
    async getFindproduct() {
      let url = '/api/BusinessSPs/findproduct'
      let params = {
        productcode: this.productcode
      }
      let data = await myPostFetch(url, params)
      this.ProductList = data.data
    },
    // 获取产品信息
    async getProductDetail() {
      let a = []
      let { data } = await getProductDetail(this.procedureId)
      for (let i = 0; i < data.length; i++) {
        if (data[i].module != '申请资料') {
          a.push(data[i])
        }
      }
      this.data = a
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1)
      this.setTime()
    },

    // 点击询价申请
    async apply() {
      let loginState = sessionStorage.getItem('loginState')
      let rzstatus = sessionStorage.getItem('rzstatus')
      if (!loginState) {
        this.title = '请先完成登录'
        this.visible = true
        return
      }
      let coopid = sessionStorage.getItem('coopid')
      if ((coopid !== 'null' && coopid !== 'undefined') & (rzstatus == 'succ')) {
        let data = await loginStatus(sessionStorage.getItem('customerid'), 'SCF012003')
        if (data.code == 10000) {
          this.$Message.error(data.msg)
          this.$router.push('/login')
          sessionStorage.clear()
          localStorage.clear()
          return
        }
        this.row = 1
      } else {
        this.title = '请前往用户中心完成认证'
        this.visible = true
        return
      }
    },
    // 跳转至登录或者认证
    updateCoopeorgInvoice() {
      this.visible = false
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      let loginState = sessionStorage.getItem('loginState')
      this.visible = false
      if (!loginState) {
        this.$router.push('/login')
        this.setTime()
        return
      }
      if (coopid == 'null' || rzstatus != 'succ') {
        this.$router.push('/platform')
        this.setTime()
        return
      } else if (coopid == 'null') {
        this.$router.push('/platform')
        this.setTime()
        return
      }
    },
    // 定时器
    setTime() {
      setTimeout(() => {
        this.$router.go(0)
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  box-sizing: border-box;
  position: relative;
  padding-bottom: 0.5208rem;
  width: 10rem;
  background-color: rgb(242, 244, 247);
  .matter {
    width: 10rem;
    height: 1.5625rem;
    background: url(@/assets/shangpiao/组152.png);
    background-size: 100% 100%;
  }
  .content {
    margin: 0 auto;
    margin-top: -1.5625rem;
    width: 8.4375rem;
    .f1 {
      display: flex;
      align-items: center;
      width: 8.4375rem;
      height: 0.4115rem;
      // 返回上一页
      .back {
        position: absolute;
        left: 2.6rem;
        font-size: 0.0833rem;
        color: #3f6ef2;
        text-decoration: underline;
        user-select: none;
        cursor: pointer;
      }
      // 面包屑
      .breadcrumb {
        display: flex;
        align-items: center;
        height: 0.3958rem;
        font-size: 0.0833rem;
        .icon {
          margin: 0 0.0521rem 0 0.0208rem;
        }
        .span {
          font-size: 0.0833rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
        }
        img {
          width: 0.0938rem;
          height: 0.0938rem;
          margin-right: 0.026rem;
        }
      }
    }
    .f2 {
      box-sizing: border-box;
      width: 8.4375rem;
      background-color: #fff;
      box-shadow: 0rem 0.0469rem 0.0938rem 0px rgba(207, 207, 207, 0.22);
      border-radius: 0.0521rem;
      padding: 0.2604rem;
      overflow: auto;
      .f2_list {
        position: relative;
        display: flex;
        align-items: center;
        width: 7.9167rem;
        height: 0.9635rem;
        background: url(@/assets/image/bgc.png) no-repeat;
        background-size: cover;
        box-shadow: 0.0417rem 0.0521rem 0.1042rem 0.0104rem #e6e6e6;
        border-radius: 0.0208rem;
        .tag {
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          top: 0px;
          left: 0px;
          width: 0.5104rem;
          height: 0.125rem;
          background: #3f6ef2;
          border-radius: 0.0208rem 0px 0px 0px;
          font-size: 0.0833rem;
          font-weight: 400;
          color: #ffffff;
          &.sptx {
            background: #3f6ef2;
          }
          &.yptx {
            background: #e8903c;
          }
        }
        .list_left {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 1.6406rem;
          height: 0.8333rem;
          border-right: 0.0052rem solid #e5e5e5;
          img {
            width: 0.9375rem;
          }
          p {
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            padding: 0 5px;
            font-size: 0.0833rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            margin-top: 0.0521rem;
            background: #edf2ff;
            color: #3f6ef2;
          }
        }
        .list_right {
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex: 1;
          height: 0.9375rem;
          margin-left: 0.5573rem;
          .productName {
            font-size: 0.1563rem;
            font-weight: 500;
            color: #000000;
          }
          .product-item-success {
            width: 100%;
            ul {
              display: flex;
              justify-content: space-evenly;
              li {
                width: 1.0417rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 0.3646rem;
                h4 {
                  font-size: 0.1667rem;
                  font-weight: 400;
                  color: #e8903c;
                  span {
                    font-size: 0.0938rem;
                  }
                }
                h5 {
                  font-size: 0.0938rem;
                  font-weight: 400;
                  color: #858585;
                }
              }
            }
          }
          .product-item-apply {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            height: 0.4479rem;
            cursor: pointer;
            h4 {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 0.8333rem;
              height: 0.2188rem;
              background: linear-gradient(-90deg, #5d98f8, #4b5af8);
              box-shadow: 0px 0.0313rem 0.1042rem 0rem rgba(0, 40, 193, 0.5);
              border-radius: 0.0208rem;
              font-size: 0.0938rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #ffffff;
              cursor: pointer;
            }

            p {
              width: 0.3385rem;
              height: 0.1302rem;
              font-size: 0.0833rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              // text-decoration: underline;
              color: #738bd0;
              border-bottom: 0.0052rem solid #738bd0;
              cursor: pointer;
            }
          }
        }
      }
    }
    .f3 {
      display: flex;
      box-sizing: border-box;
      width: 7.9167rem;
      height: 0.3385rem;
      border-bottom: 0.0052rem solid #e0e6ed;
      margin-top: 0.3125rem;
      .title {
        display: flex;
        align-items: center;
        width: 100%;
        height: 0.3385rem;
        z-index: 99;
        h3 {
          display: flex;
          align-items: center;
          padding: 0 0.0521rem;
          height: 0.3385rem;
          box-sizing: border-box;
          font-size: 0.125rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #838383;
          cursor: pointer;
          margin-right: 0.2813rem;
          &.active {
            box-sizing: border-box;
            border-bottom: 0.0052rem solid #3f6ef2;
            color: #3f6ef2;
          }
        }
      }
    }
    // 申请流程
    .apply-flow {
      margin-top: 0.2604rem;
    }
    // 产品详情
    .details {
      box-sizing: border-box;
      padding: 0.0521rem 0;
      width: 100%;
      margin-top: 0.0521rem;
      .titles {
        position: relative;
        width: 100%;
        height: 0.1042rem;
        margin: 0.1042rem 0 0.0521rem 0;
        img {
          position: absolute;
          top: 0.0573rem;
          width: 0.6354rem;
          height: 0.0469rem;
        }
        h3 {
          position: absolute;
          left: 0px;
          font-size: 0.1146rem;
          font-family: Source Han Sans SC;
          font-weight: 500;
          color: #e8903c;
        }
      }
      p {
        font-size: 0.0938rem;
        font-family: Source Han Sans SC;
        font-weight: 300;
        color: #5b5b5c;
        line-height: 0.1823rem;

        margin-top: 0.1458rem;
        // text-indent: 2em;
      }
      .title {
        position: relative;
        width: 100%;
        height: 0.1042rem;
        margin: 0.1042rem 0 0.0521rem 0;
        h3 {
          font-size: 0.1146rem;
          font-weight: 500;
          color: #e8903c;
        }
        p {
          cursor: pointer;
          text-decoration: underline;
          font-size: 0.0938rem;
          font-weight: 300;
          color: #3f6ef2;
          margin-top: 0.0521rem !important;
          a {
            color: #3f6ef2;
          }
        }
      }
    }
  }
}
// 弹出框
.dialog-center {
  text-align: center;
  overflow: hidden;
  p {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    font-size: 0.0833rem;
    font-family: Source Han Sans SC;
    font-weight: 600;
    color: #4d4d4d;
  }
}
.dialog-footer {
  display: flex;
  justify-content: space-evenly;
  width: 70%;
  margin: 0 auto;
  z-index: 9999;
  .dialog-footer-bnt {
    width: 0.6302rem;
    height: 0.1615rem;
    color: #3f6ef2;
    border: 1px solid #3f6ef2;
    border-radius: 0.0208rem;
    background-color: #fff;
    z-index: 9999;
  }
  .btn2 {
    color: #fff;
    background-color: #3f6ef2;
    z-index: 9999;
  }
  .abc {
    width: 1.9167rem;
    .el-select {
      width: 100%;
    }
  }
}
::v-deep .el-dialog__body {
  padding: 0.1563rem 0.1042rem;
  color: #606266;
  font-size: 0.0729rem;
  word-break: break-all;
}
::v-deep .el-dialog__header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 46px;
  padding: 0.1042rem 0.1042rem 0.0521rem;
  border-bottom: 0.0052rem solid #dddbdb;
}
::v-deep .el-dialog__title {
  font-size: 0.1042rem;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #3f6df1;
}
</style>
